<template>
  <div class="banner">
    <el-carousel :height="bannerHeihgt" indicator-position="inside">
      <el-carousel-item
        v-for="item in bannerList"
        :key="item"
        :style="{ backgroundImage: 'url(' + item.img + ')' }"
      >
        <h3>{{ item.title }}</h3>
        <p>{{ item.desc }}</p>
        <el-button>查看详情&nbsp;&nbsp;&nbsp;&nbsp;></el-button>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bannerHeihgt: "290px",
      bannerList: [
        {
          img: require("@/assets/img/banner.jpg"),
          title: "超多短视频编剧为您创作",
          desc: "各大网络平台红人帮你开启创作",
          link: "",
        },
      ],
      tabList: [
        {
          icon: require("@/assets/img/icon_1.png"),
          title: "作品展示",
          desc: "优秀作品欣赏全集",
          lineColor: "#83BCFC",
        },
        {
          icon: require("@/assets/img/icon_2.png"),
          title: "版权交易",
          desc: "平台专业保障",
          lineColor: "#34D4D9",
        },
        {
          icon: require("@/assets/img/icon_3.png"),
          title: "我要创作",
          desc: "才思泉涌的灵感发泄一下吗？",
          lineColor: "#98E3BC",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.banner {
  height: 290px;
  .el-carousel__item {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-size: cover;
    padding: 0 88px;
    align-items: flex-start;
    justify-content: center;
    h3 {
      color: #fff;
      font-size: 34px;
      margin: 0;
    }
    p {
      color: #fff;
      font-size: 18px;
      letter-spacing: 8px;
      margin-top: 10px;
    }
    .el-button {
      color: #66958c;
      border: none;
      margin-top: 40px;
    }
  }
  ::v-deep {
    .el-carousel__indicators {
      bottom: 0;
    }
  }
}
</style>